<template>
  <div>
    <div id="viewer"></div>
  </div>
</template>
<script>
import { Viewer } from 'photo-sphere-viewer'
// import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
// import 'photo-sphere-viewer/dist/plugins/markers.css'
// 点位插件
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers"
import "photo-sphere-viewer/dist/plugins/markers.css"


export default {
  data () {
    return {
      viewer: '',
      imgurl1: require('../assets/key-biscayne-1.jpg'),
      imgurl2: require('../assets/sphere.jpg'),
      imgurl3: require('../assets/tunnel.jpg'),
    }
  },
  mounted () {
    this.viewer=new Viewer({
      container: document.querySelector('#viewer'),
      panorama: this.imgurl1,
      // 设置图片标题
      caption: "这是一个标题",
      // 设置图片描述
      description: "这是一个描述,xxxxxxxxxxxxxxxxx",
      size: {
        width: '100vw',
        height: '100vh',
      },
      navbar: [
        // 自定义按钮
        {
          id: "my-button",
          content: "自定义按钮",
          title: "Hello world",
          className: "custom-button",
          onClick: viewer => {
            alert("Hello from custom button")
          },
        },
        "autorotate", // 自动旋转按钮
        "zoom", // 缩放按钮
        // "caption", // 标题按钮
        "fullscreen", // 全屏按钮
        // "download", // 下载按钮
        "description", // 描述按钮
      ],
      fisheye: true,
      plugins: [
        [
          MarkersPlugin,
          {
            markers: [
              {
                id: 'circle',
                tooltip: 'A circle of radius 30',
                circle: 30,
                svgStyle: {
                  fill: 'rgba(255,255,0,0.3)',
                  stroke: 'yellow',
                  strokeWidth: '2px',
                },
                longitude: -1.5,
                latitude: -0.28,
                anchor: 'center right',
              }
            ],
          },
        ],
      ],
    })

    let markersPlugin=this.viewer.getPlugin(MarkersPlugin)
    markersPlugin.on("select-marker",(e,marker,data) => {
      console.log(marker.config)
      // 点击点位触发该事件
      // markersPlugin.removeMarker(marker) // 移除标记
      // markersPlugin.addMarker({}) // 添加标记
      // markersPlugin.updateMarker({}) // 更新标记
      this.viewer.animate({
        longitude: marker.config.longitude,
        latitude: marker.config.latitude,
        zoom: 100,
        speed: '-2rpm',
      }).then(() =>
        this.viewer.setPanorama(
          this.imgurl2
        ).then(() =>
          markersPlugin.updateMarker({
            id: marker.id,
            longitude: 0,
            latitude: 0,
          }),
          this.viewer.animate({
            zoom: 50,
            speed: '2rpm',
          }).then(() =>
            this.imgurl2=this.imgurl3,
            console.log("继续操作")
          )
        )
      )
    })
  }
}
</script>

<style>
#go001 {
  background-color: pink;
}
</style>
